<template>
    <div class="searchChildRouterPage">

        <order-box :data="user" @changeData="changeSort"></order-box>
     
        <bili-user-all-box :data="videoList"></bili-user-all-box>

        <div class="paging" v-if="numPages">
            <pagin-tion :total="numPages" @changeIndex="changePage"></pagin-tion>
        </div>

    </div> 
</template>

<script lang="ts" setup>
import { onBeforeMount,ref } from 'vue'
import { getDiffTypeData,paginTion,biliUserAllBox,orderBox } from '../layout/index'
import { userSort,userAllUp } from '@/JSON/searchOrder.js'
import { change_query } from '../type'
import { useRouter } from 'vue-router'
import { baseRouteGetStatus,changeNowRoute } from '@/router/changeUrl'

interface Props{
    keyword:string
}
const props = defineProps<Props>()
const router = useRouter()
let videoList = ref()
const user = ref([userSort,userAllUp])
const map = new Map()
let numPages = ref<number | null>()

onBeforeMount(() => {
    baseRouteGetStatus(router,map)
    let obj = changeNowRoute(router,map)
    if (map.has('order') && map.get('order').includes('order_sort')){
        let arr = map.get('order').split(',')
        obj['order'] = arr[0]
        obj['order_sort'] = 1
    }
    console.log('objs',obj);
    
    initData(obj)
})
function initData(other?:change_query){
    getDiffTypeData('user',props.keyword,other).then(res => {
        console.log('user',res);
        if (!numPages.value){
            numPages.value = res.data.numPages
        }
        videoList.value = res.data.result
    }).catch(res => {
        alert('user数据加载失败啦')
    })
}
function changePage(val:number){
    if (val === 1) map.delete('page')
    else map.set('page',val)

    let obj = changeNowRoute(router,map)
    if (map.get('order').includes('order_sort')) {
        let arr = map.get('order').split(',')
        obj['order'] = arr[0]
        obj['order_sort'] = 1
    }
    return initData(obj)
}
/**
 * 
 * @param title query中的key
 * @param label query中的value
 * 由于参数存在问题 其中一个参数 order_sort 是 level,order_sort 形式 需要单独处理 
 * 在请求数据是 处理参数
 */
function changeSort(title:string,label:string){
    numPages.value = null
    map.set(title,label)
    map.delete('page')
    let obj = changeNowRoute(router,map)
    if (label.includes('order_sort')) {
        let arr = label.split(',')
        obj['order'] = arr[0]
        obj['order_sort'] = 1
    }

    return initData(obj)
}
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/publicNodeStyle.scss);

</style>